<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        #drag-wrap{
            width: 250px;
            height: 250px;
            border: 5px solid red;
        }
         #wrap1 img{
             width: 60px;
             height: 60px;
             margin: 10px;
         }
    </style>
</head>
<body>
<!-- 部分标签 -->
<div id="drag-wrap">
    <div class="item" id="wrap1">
        <img id="img1" alt="1" src="img/Chrysanthemum.jpg">
        <img id="img2" alt="2" src="img/Desert.jpg">
        <img id="img3" alt="3" src="img/Hydrangeas.jpg">
        <img id="img4" alt="4" src="img/Jellyfish.jpg">
        <img id="img5" alt="5" src="img/Koala.jpg">
        <img id="img6" alt="6" src="img/Lighthouse.jpg">
        <img id="img7" alt="7" src="img/Penguins.jpg">
        <img id="img8" alt="8" src="img/Tulips.jpg">
    </div>
</div>

</body>
<script>
    const dragCon = document.getElementById('drag-wrap');

    dragCon.addEventListener('dragstart', startDrag, false);

    /**
     * 这里一定要阻止dragover的默认行为，不然触发不了drop
     */
    dragCon.addEventListener('dragover', function (e) {
        e.preventDefault();
    }, false);
    dragCon.addEventListener('drop', exchangeElement, false);

    function startDrag(e) {
        e.dataTransfer.setData('Text', e.target.id + ';' + e.target.parentElement.id);
    }

    function exchangeElement(e) {
        e.preventDefault();
        const el = e.target;
        let PE, //要插入位置的父元素
            CE; //需要交换的元素
        if (el.tagName.toLowerCase() !== 'div') {
            PE = el.parentElement;
            CE = el;
        } else {
            PE = el;
            CE = el.querySelector('img');
        }



        /**
         * 判断不在控制范围内
         */
        if (!PE.classList.contains('item')) {
            return;
        }
        const data = e.dataTransfer.getData('Text').split(';');
        //交换元素
        document.getElementById(data[1]).appendChild(CE);
        PE.appendChild(document.getElementById(data[0]));
    }
</script>
</html>